import React, { Component } from 'react'

export default class App extends Component {

    state = {
        name: '张三',
        age: 18
    }

    changeValue(e) {
        // console.log(e.target.value);
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    render() {
        return (
            <div>
                <h1> {this.state.name} - {this.state.age} </h1>

                {/* 该写法比较繁琐，而且不够美观 */}
                <input value={this.state.name} onChange={(event) => {
                    this.setState({
                        name: event.target.value
                    })
                }} type="text" />
                <input value={this.state.age} onChange={(event) => {
                    this.setState({
                        age: event.target.value
                    })
                }} type="text" />

                <hr />
                {/* 推荐写法 */}
                <input name='name' value={this.state.name} onChange={e => { this.changeValue(e) }} type="text" />
                <input name='age' value={this.state.age} onChange={e => { this.changeValue(e) }} type="text" />




            </div>
        )
    }
}
